<template>
    <win @close="close" win-width="43%" closeSize="1.6" winHeight="500px">
        <p class="title">
            账户修改
        </p>
        <div class="contain">
            <div class="leftBox">
                <div class="avatar">
                    <SeeAvatar :avatar-url="info.avatar" ref="getAvatar"></SeeAvatar>
                </div>
                <p class="name">
                    {{ info.name }}
                </p>
            </div>
            <div class="rightBox">
                <li>
                    手机: <input type="text" v-model="info.phone">
                </li>
                <li>
                    邮箱: <input type="text" v-model="info.email">
                </li>
                <li>
                    密码: <input type="text" v-model="password">
                </li>
                <li>
                    学院: <input type="text" v-model="info.college">
                </li>
                <li>
                    专业: <input type="text" v-model="info.major">
                </li>
                <li>
                    班级: <input type="text" v-model="info.grades">
                </li>
                <li>
                    工号: <input type="text" v-model="info.number">
                </li>
            </div>
        </div>
        <div class="but">
            <button @click="close">取消</button>
            <button id="yes" @click="submitChange">确定</button>
        </div>
        <p class="delBut">
            <span @click="deleteMem">删除用户</span>
        </p>
    </win>
</template>
<script setup>
import { ref, getCurrentInstance } from 'vue';
import { getUserData } from '../utils';
import win from './PopUpWindow.vue'
import SeeAvatar from './SeeAvatar.vue'
import imgUrl from '../assets/images/administrator/edit.svg'

const http = getCurrentInstance()?.appContext.config.globalProperties.$http


// 获得用户信息
// 获得用户信息
let userData = {
    Token: '',
    avatar: '',
    id: '',
    role: ''
}
if (getUserData() != undefined) {
    userData = getUserData();
}

//操作失败、成功提醒
const hint = ref()

const password = ref()
const getAvatar = ref()
let copy = {}
const info = ref({})
const changeInfo = function (item) {
    let { phone, email, college, major, grades, number, name, school } = item
    copy.phone = phone
    copy.email = email
    copy.college = college
    copy.major = major
    copy.number = number
    copy.grades = grades
    copy.school = school
    info.value = item
    getAvatar.value.getInfoAvatar(item.avatar)

}

const emits = defineEmits(['close', 'succHandle', 'errHandle', 'changePage'])

const close = function () {
    console.log(copy);
    info.value.phone = copy.phone
    info.value.email = copy.email
    info.value.college = copy.college
    info.value.major = copy.major
    info.value.number = copy.number
    info.value.grades = copy.grades
    password.value = ''
    emits('close')
}


const submitChange = function () {
    let { phone, email, school, college, major, grades, number } = info.value
    let params = {}
    if (copy.phone != phone) {
        params.phone = phone
    }
    if (copy.email != email) {
        params.email = email
    }
    if (school != copy.school)
        params.school = school
    if (college != copy.college)
        params.college = college
    if (major != copy.major)
        params.major = major
    if (grades != copy.grades)
        params.grade = grades
    if (copy.number != number)
        params.number = number
    params = JSON.stringify(
        params
    )
    console.log(params);
    let uid = info.value.subId
    fetch(http + '/admin/users/' + uid, {
        method: 'put',
        headers: {
            "Token": userData.Token,
            'Content-Type': 'application/json; charset=utf-8'
        },
        body: params,
        responseType: 'json',
    }).then((response) => {
        return response.json()
    }).then((data) => {
        console.log(data);
        if (data.code == 200) {
            emits('succHandle')
        } else {
            emits('errHandle', data.msg)
        }
        emits('close')
    }).catch((err) => {
        console.log(err);
    })
    password.value = ''
}

const deleteMem = function(){
    console.log(info.value.subId);
    let subId = info.value.subId
    fetch(http + '/admin/subUser/'+subId, {
        method: 'delete',
        headers: {
            "Token": userData.Token,
            'Content-Type': 'application/json; charset=utf-8'
        },
        responseType: 'json',
    }).then((response) => {
        return response.json()
    }).then((data) => {
        console.log(data);
        if (data.code == 200) {
            emits('succHandle')
            history.go(0)
        } else {
            emits('errHandle', data.msg)
        }
        emits('close')
    }).catch((err) => {
        console.log(err);
    })
}
defineExpose({
    changeInfo
})
</script>
<style scoped>
.title {
    font-family: Source Han Sans CN;
    font-size: 22px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 20px;
    letter-spacing: 0px;
    color: #707070;
    text-align: center;
    margin-top: 5%;
    font-weight: 550;
    /* padding-left: 10%;
    padding-right: 10%; */
    /* width: 80%; */
}

.contain {
    width: 100%;
    display: flex;
    margin-top: 4%;
    height: 65%;
}

.leftBox {
    width: 34%;
    height: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    padding-left: 9%;
    padding-top: 3%;
}

.avatar {
    width: 120px;
    height: 160px;
    background-color: #f1f2f6;
    box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
}

.name {
    font-family: Source Han Sans CN;
    font-size: 15px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 20px;
    letter-spacing: 0px;
    color: #707070;
    margin-top: 10%;
    text-align: center;
}

.rightBox {
    width: 66%;
    height: 100%;
    justify-content: space-between;
    flex-direction: column;
    padding-left: 7%;
    display: flex;
}

.rightBox li {
    font-family: Source Han Sans CN;
    font-size: 18px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 20px;
    letter-spacing: 0px;
    list-style: none;
    color: #707070;
    outline: none;
}

.rightBox input {
    padding-left: 4%;
    padding-right: 10%;
    background: url('../assets/images/administrator/edit.svg') 95% center no-repeat;
    width: 251px;
    height: 34px;
    background-color: #f1f2f6;
    box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
    border-radius: 6px;
    margin-left: 2%;
    outline: none;
    border: 0px;
    color: #707070;
}

.but {
    margin-top: 3.4%;
    width: 100%;
    padding-left: 15%;
    padding-right: 15%;
    display: flex;
    justify-content: space-between;
}

.but button {
    width: 160px;
    height: 40px;
    cursor: pointer;
    background-color: #707070;
    box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
    opacity: 0.75;
    color: white;
    border: 0px;
    font-family: Source Han Sans CN;
    font-size: 17px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 34px;
    letter-spacing: 0px;
    color: #fafafa;
    border-radius: 6px;
}

#yes {
    background-color: #8493a6 !important;
}
.delBut{
    display: flex;
    justify-content: flex-end;
    color: #8493a6;
    padding-right: 3%;
    margin-top: 2%;
}
.delBut span{
    border-bottom: 1px solid #8493a6;
    display: block;
    font-size: 12px;
    cursor: pointer;
}
.delBut span:hover{
    opacity: 0.6;
}
</style>